<template>
  <p>{{ mainStore.count }}</p>
  <p>{{ mainStore.foo }}</p>
  <p>{{ mainStore.arr }}</p>
  <p>{{ mainStore.count10 }}</p>
  <hr />
  <p>{{ count }}</p>
  <p>{{ foo }}</p>
  <p>{{ arr }}</p>
  <p>{{ count10 }}</p>

  <button @click="handlerChange">点我修改数据</button>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useMainStore } from "../store";

const mainStore = useMainStore();

//解构赋值，转换为响应式对象
const { count, foo, arr, count10 } = storeToRefs(mainStore);

const handlerChange = () => {
  /*  方式一：最简单的方法  */
  // mainStore.count++;
  // mainStore.foo = "hello";
  /*
   */
  /* 方式二：如果需要修改多个数据，建议使用$patch批量更新 */
  // mainStore.$patch({
  //   count: mainStore.count + 1,
  //   foo: "hello",
  // });
  /*
   */
  /* 方式三：$patch 一个函数 */
  // mainStore.$patch((state) => {
  //   state.count++;
  //   state.foo += "!";
  //   state.arr.push(4);
  // });
  /*
   */
  /* 方式四：当逻辑方法过多时候，可以封装到actions做处理 */
  mainStore.changeState(10);
};
</script>

<style></style>
